<template>
	<view>
		<!-- <free-nav-bar showBack></free-nav-bar> -->

		<!-- 验证码登录注册 -->
		<view class="font-mdd mt-6 p-5" style="color: rgba(71, 71, 71, 0.6);">
			<view class=" ">请完成以下验证</view>
			<!-- 手机号 -->
			<view class="flex align-center mt-3">
				<view class="font-mdd ">
					
					请输入<text>{{mobile}}</text>收到的短信验证码
				</view>
			</view>
			<!-- 验证码 -->
			<view class="flex align-center justify-between mt-5" style="height:80rpx ;">
				<view class="font-sm border-bottom flex py-2" style="width: 355rpx;">
					<input type="text" value=""  v-model="code" placeholder="请输入验证码" 	placeholder-style="font-size:28rpx;color:#CCCCCC;" />
					<view class="" ><view v-if="code" class="icon-guanbi iconfont text-light"></view></view>
				</view>
				<view class="text-light text-white px-2 py-1 " :style="isActiveCode" @click="send()">{{ codeText }}</view>
			</view>

			<!-- xiayibu-->
			<view class="text-white mt-9 flex align-center justify-center" :style="isActiveLogin" style="height: 90rpx;box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);" @click="next()">下一步</view>

		</view>
	</view>
</template>

<script>


// 验证密码手机号
import {validateMoble} from '@/common/js/validate.js'
import {sms,checkSms,alterPhoneNumber,writeOff,writeOffSendCode} from '@/apis/nurse/index.js'
export default {
	data() {
		return {
			phone: '', //手机号码
			code: '', //输入的验证码
			codeText: '发送验证码', //验证码按钮显示内容
			sendCode: false, //是否点击了发送验证码
			countTimer: 60, //全局保存倒计时60s
			type:'',//1修改手机号 2修改登录密码 7修改支付密码


		};
	},
	onLoad(option) {
		this.type = option.type
		console.log(this.type)
		this.phone = this.$store.state.userInfo.mobile
	},
	onShow() {
		
	},
	computed: {
		mobile(){
			return validateMoble(this.phone)
		},
		// 动态改变背景颜色
		isActiveCode() {
			if (this.countTimer == 60) {
				return `background-color: #3C8EFF;`;
			} else {
				return `background: #ADCEFB`;
			}
		},
		isActiveLogin() {
			if (this.code) {
				return `background-color: #3C8EFF;`;
			} else {
				return `background: #ADCEFB`;
			}
		}
	},
	components: {
	},
	methods: {
		// 定时器倒计时
		countDownTime() {
			if (this.countTimer == 60) {
				var timer = setInterval(() => {
					if (this.countTimer > 0) {
						this.codeText = '重新发送' + this.countTimer + 's';
						this.countTimer--;
					} else {
						this.codeText = '发送验证码';
						clearInterval(timer);
						this.countTimer = 60;
					}
				}, 1000);
			}
		},
		async get(){
			if(this.type==9){
				// 注销是单独的短信接口
				let obj = {
					phoneNumber:this.phone
				}
				let cancel = await writeOffSendCode(obj)
				if(cancel.success){
					this.countDownTime()
				}
				return
			}
			let data = {
				mobile:this.phone,
				type:this.type
			}
			let res =await sms(data)
			if(res.success){
				this.countDownTime()
			}
			console.log(res,'获取验证码')
		},
		// 发送验证码
		send() {
			// 如果还在计时器时间内就无法点击
			if (this.countTimer < 60) {
				plus.nativeUI.toast('同一手机号请求间距不能少于60秒')
				// uni.showToast({
				// 	title: '同一手机号请求间距不能少于60秒',
				// 	icon: 'none',
				// 	duration: 1000
				// });
				return;
			}else{
				this.get()
			}
			this.code=''
		},
		async next(){
			let data = {
				code:this.code,
				mobile:this.phone,
				type:this.type,
				// uuid:this.$store.state.uuid
			}
			let _this = this
			if(this.code){
				if(this.type==9){
					// 注销功能
					let res1 = await writeOff({code: this.code})
					if(res1.success){
						// #ifdef APP-PLUS
						plus.nativeUI.toast('注销成功')
						// #endif
						// #ifdef H5
						uni.showToast({
							title:'注销成功',
							icon:'none',
						})
						// #endif
						uni.clearStorageSync();
						uni.setStorageSync('deniedPresentPermission','true')
						_this.$store.state.attestStatus=''
						_this.$store.state.nameStatus=''
						_this.$store.state.userInfo=''
						setTimeout(()=> {
							uni.reLaunch({
								url:'../../login-register/login/login'
							})
						},200)
						
					}
					return
				}
				let res =await checkSms(data)
				console.log(res,'验证码判断')
				if(res.success){
					let code = this.code
					if(this.type == 1){
						console.log(data,'type1')
						uni.navigateTo({
							url:'../change-phone/change-phone'
						})
					}else if(this.type == 2){
						console.log(data,'type2')
						uni.navigateTo({
							url:'../../login-register/input-password/input-password?phone='+this.phone
						})
					}else if(this.type == 7){
						console.log(data,'type7')
						uni.navigateTo({
							url:'../../wallet/set-code/set-code?type=2'
						})
					}
				}else{
					plus.nativeUI.toast('验证码错误！')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'验证码错误！'
					// })
				}
			}else{
				plus.nativeUI.toast('请输入验证码！')
				// uni.showToast({
				// 	icon:'none',
				// 	title:'请输入验证码！'
				// })
			}
				
				this.code = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
// 输入框输入的时候字体为32rpx
::v-deep.uni-input-input {
	/*deep样式穿透，直接从底部修改*/
	font-size: 32rpx !important;
}

</style>
